<template>
	<view>
		<view class='bg-red light padding'>
			<view v-if="isNew">
				请尽量填写真实完善的信息，后台审核通过后，可在 “个人中心”--我的公司中进行车队的编辑
			</view>
		</view>
		<form class="form-cust bg-white">
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>选择类型</view>
				<!--  -->
				<picker @change="typeChange" :range="selector" range-key="category">
					<view class="picker">
						{{typeName}}
					</view>
				</picker>
				<input hidden name="bussCategoryId" :value="applicationType"></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>公司名称</view>
				<input name='businessName' class='text-right' :value='businessName' bindinput='changeInput'
					data-prop='businessName' placeholder="请填写您的公司名称"></input>
			</view>
			<view class="cu-bar bg-white padding-top border-top">
				<view class="action text-gray">
					<text class='text-red'>*</text>首页图片（用于搜索列表显示，1张）
				</view>
				<input v-if="imgIndex.length>0" hidden name='homePicPath' :value='imgIndex[0].url'></input>
			</view>
			<img-upload col-class="justify-center" :imgs="imgIndex" :max='1' @change="changeHome" />
			<!-- <view class="cu-form-group text-center" style='padding:20rpx 22.5vw;border-top:none'>
				<img-picker :imgs="1" bindchange='idxChange' bindnoid="delHomePic" :files="imgIndex">
				</img-picker>
			</view> -->
			<view class="cu-bar bg-white padding-top border-top">
				<view class="action text-gray">
					<text class='text-red'>*</text>轮播图（用于商铺首页展示，最多3张）
				</view>
				<view class="action">
					{{imgSlis.length}}/3
				</view>
			</view>
			<img-upload :imgs="imgSlis" @change="changeSlis" />
			<!--
			 <view class="cu-form-group">
				<img-picker :imgs="3" bindchange='slisChange' noDel :files="imgSlis" bindnoid='delHomePic'>
				</img-picker>
			</view> -->
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>商家坐标</view>
				<input bindtap='location' class='text-right' placeholder='选择坐标地址' disabled name='coordinateAddress'
					:value='coordinateAddress'></input>
				<text class="cuIcon-locationfill text-orange" @tap='location'></text>
				<input hidden name='longitude' :value='longitude'></input>
				<input hidden name='latitude' :value='latitude'></input>
				<input hidden name='businessID' :value='businessID'></input>
				<input hidden name='companyAreaCode' :value='companyAreaCode'></input>
				<input hidden name='companyCityName' :value='companyCityName'></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>具体地址</view>
				<input class='text-right' placeholder='填写具体地址' name='businessAddress' :value='businessAddress'
					bindinput='changeInput' data-prop='businessAddress'></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>联系电话</view>
				<input class='text-right' name='phone' :value='phone' placeholder='填写联系电话' type='number'
					bindinput='changeInput' data-prop='phone'></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-gray"><text class='text-red'>*</text>商家介绍</view>
			</view>
			<view class="bg-white">
				<textarea class='lzy-textarea padding-sm' maxlength="-1" name='profile' placeholder='填写商家介绍...'
					:value='profile' bindinput='changeInput' data-prop='profile'></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title text-gray">最新公告</view>
			</view>
			<view class="bg-white">
				<textarea adjust-position class='lzy-textarea padding-sm' maxlength="-1" name='bussAd' :value='bussAd'
					bindinput='changeInput' data-prop='bussAd' placeholder='可以输入通知、最近动态、招聘信息和优惠活动等'></textarea>
			</view>
			<view class="cu-form-group flex">
				<view class="title flex-sub text-gray">入驻费用</view>
				<view class="flex-treble">
					<radio-group class="block" bindchange="radioChange">
						<view class="flex padding-top" v-for="(item,index) in noteList">
							<view class="flex-treble">
								<text class="text-red">￥{{ item.paycheckNum }}</text>/{{ item.paycheckDesc }}
								<text class="padding-left-xs text-red line-through"
									v-if="item.specialNote">{{ item.specialNote }}</text>
							</view>
							<view class="flex-sub">
								<!-- class="checked"  :value="index"  :checked="payIndex==index"-->
								<radio ></radio>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="bg-white padding">
				<!--  -->
<!-- 				<radio :checked="curPay.paycheckNum==item.paycheckNum?true:false" :value="item.paycheckNum+''"></radio> -->
				<radio class="blue" @tap="checked=!checked" :checked="checked"  ></radio>
				我已阅读并同意 <text bindtap='protocol' class='text-blue'>《入驻协议》</text>
			</view>

			<button class="cu-btn block bg-blue margin-tb-sm lg margin" @tap="submit">
				提 交
			</button>
			<view class="margin padding"></view>

		</form>

		<!-- <view :class="'cu-modal +'(showModal ? 'show' : '')">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">提示</view>
						</view>
						<view class="padding-xl">
							恭喜您入驻成功，请完善公司产品详情，让客户更好的了解你
						</view>
					</view>
				</view> -->

	</view>
</template>

<script>
import { iconList} from '../../../utils/util.js';
import ImgUpload from '../../../components/img-upload.vue'
	export default {
		components:{
			ImgUpload
			},
		data() {
			return {
				imgIndex: [],
				imgSlis: [],
				selector: iconList,
				typeName: '',
				applicationType: 1,
				applyInfo: {},
				checked: true, // 用于 checkbox
				longitude: '',
				latitude: '',
				isNew: true,
				noteList: [],
				payIndex: 0,
				isSuccess: false,
				showModal: false,
				//
				businessID: '',
				bussCategoryId: '',
				businessName: '',
				companyCityName: '',
				companyAreaCode: '',
				coordinateAddress: '',
				businessAddress: '',
				phone: '',
				bussAd: '',
				profile: '',
				longitude: '',
				latitude: '',
				imgIndex: [],
				imgSlis: []
			}
		},
		onLoad(options) {
			this.getTypes()
			this.getAttenCity();
			this.getRechargeNoteList()
		},
		onShow() {

		},
		methods: {
			changeHome(val){
				this.imgIndex=val
			},
			changeSlis(val){
				this.imgSlis=val
			},
			  // 获取详情
			  getDetail() {
			    let _this = this;
			    wx.showLoading({
			      mask: true
			    });
			    util.baseRequest('api/business/my', 'GET', {}, function (res) {
			      if (res.wheelPicList) {
			        res.wheelPicList.map(item => {
			          item.url = item.picURL
			        });
			      }
			      _this.setData({
			        businessID: res.businessID,
			        bussCategoryId: res.bussCategoryId,
			        businessName: res.businessName,
			        companyCityName: res.companyCityName,
			        companyAreaCode: res.companyAreaCode,
			        coordinateAddress: res.coordinateAddress,
			        businessAddress: res.businessAddress,
			        phone: res.phone,
			        bussAd: res.bussAd,
			        profile: res.profile,
			        longitude: res.longitude,
			        latitude: res.latitude,
			        imgIndex: res.homePicPath ? [{ url: res.homePicPath }] : [],
			        imgSlis: res.wheelPicList
			      })
			      wx.hideLoading();
			    });
			  },
			  //
			  getRechargeNoteList() {
			    if(this.noteList.length>0){
			      return;
			    }
				let that =this;
			    this.baseRequest('api/driver/recharge/note', 'GET', {
			      type: 2
			    }, (noteList) => {
			      that.noteList=noteList
			    });
			  },
			getTypes() {
				this.selector = iconList;
				this.typeName = iconList[0].category;
				this.applicationType = iconList[0].id;
				uni.setStorageSync('storeIcons', iconList); // 缓存图标列表
			},
			// 获取当前城市 
			getAttenCity() {
				// 获取缓存位置
				// let location = util.location();
				// this.setData({
				//   companyCityName: location.attenCity,
				//   companyAreaCode: location.areaCode
				// });
			},
			// 营业执照图片
			imgChange(e) {
				this.files = e.detail.data
			},
			// 关系证明图片
			sliChange(e) {
				this.slides = e.detail.data

			},
			// 首页图
			idxChange(e) {
				this.imgIndex = e.detail.data
			},
			// 轮播图
			slisChange(e) {
				this.imgSlis = e.detail.data
			},
			// 产品图
			proChange(e) {
				this.pros = e.detail.data
			},
			// 入驻协议
			protocol() {
				uni.navigateTo({
					url: '/pages/cars/protocol/protocol'
				})
			},
			// 是否同意协议
			agree(e) {
				this.checked = !e.currentTarget.dataset.checked

			},
			// 类型选择
			typeChange(e) {
				this.typeName = this.selector[e.detail.value].category,
				this.applicationType = this.selector[e.detail.value].id
			},

			// 验证字段
			isCheckPass(data) {
				if (data.businessName == '') {
					uni.showToast({
						title: '公司名称必须填写',
						icon: 'none'
					});
					return false;
				}
				// 判断地址
				if (!data.coordinateAddress || !data.businessAddress) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return false;
				}
				// 判断图片
				if (!data.homePicPath || this.data.imgSlis.length == 0) {
					uni.showToast({
						title: '图片未上传',
						icon: 'none'
					});
					return false;
				}
				// 判断电话
				if (!util.isPhone(data.phone)) {
					uni.showToast({
						title: '手机号码错误',
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			radioChange(e) {
				this.payIndex = e.detail.value

			},
			// 表单事件
			changeInput(e) {
				let changed = {};
				let prop = e.currentTarget.dataset.prop
				changed[prop] = e.detail.value;
				this.changed = changed
			},

			// 绑定手机
			bindPhone(e) {
				let _this = this;
				/*uni.login({
				  success: res => {
				    let data = {
				      code: res.code,
				      encryptedData: e.detail.encryptedData,
				      iv: e.detail.iv
				    };
				    uni.showLoading({
				      title: '请稍候...'
				    })
				    // 解密绑定手机
				    this.baseRequest('wxPhone', 'GET', data, function (res) {
				      uni.hideLoading();
				      let userInfo = uni.getStorageSync('userInfo');
				      userInfo.phoneNo = res.phoneNumber;
				      uni.setStorageSync('userInfo', userInfo);
				      _this.setData({
				        phone: res.phoneNumber
				      })
				    });
				  }
				});*/
			},
			// 提交
			submit(e) {
				if (!this.checked){
					uni.showToast({
						title: '请同意入驻协议',
						icon: 'none'
					});
					return;
				}
				console.log(this,e)
					let data = this;
					if (this.isCheckPass(this)) {
						// 轮播图
						data.wheelPicList = [];
						this.imgSlis.map((item, idx) => {
							data.wheelPicList.push({
								picURL: item.url
							});
						})
						uni.showLoading({
							title: '请稍候...',
							mask: true
						})
						// 
						let _this = this;
						let userInfo = uni.getStorageSync('ONLINE_USER'); //
						this.baseRequest('api/business/newapply', 'POST', data, function(res, info) {
							// 更新缓存信息
							userInfo.bussFlg = '10';
							uni.setStorageSync('ONLINE_USER', userInfo);
							// _this.setData({
							// 	isSuccess: true
							// })
							let index = _this.payIndex;
							let list = _this.noteList;
							let payData = {
								openID: uni.getStorageSync('ONLINE_USER').openID,
								orderType: 0,
								paycheckId: list[index].paycheckId,
								paycheckNum: list[index].paycheckNum,
								rechargeChannelDesc: '入驻',
								type: 1
							}
							this.baseRequest('recharge/recharge/gold', 'POST', payData, function(payRes) {
								uni.hideLoading();
								/*uni.requestPayment({
									timeStamp: payRes.timeStamp,
									nonceStr: payRes.nonce_str,
									package: 'prepay_id=' + payRes.prepay_id,
									signType: 'MD5',
									paySign: payRes.paySign,
									success() {
										// 更新缓存信息
										userInfo.bussFlg = '11';
										uni.setStorageSync('userInfo', userInfo);
										_this.setData({
											showModal: true
										})
										setTimeout(() => {
											uni.hideToast();
											uni.navigateTo({
												url: '/pages/user/store2/store2',
											})
										}, 3000)
									},
									fail() {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										});
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/user/user',
											})
										}, 1000)
									}
								})*/
							});
						});
					}
				
			}
		}
	}
</script>

<style>

</style>